<template>
    <div>
        <base-list ref="containerOnPort" :condition="condition" :datas.sync="container" :pageSearch="pageSearch">
            <el-form :inline="true" :model="condition" class="search-form" slot="search" label-width="100px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="箱号">
                            <!--<search-container-on-port-->
                            <!--v-model="condition['search_LIKE_containerNo']"></search-container-on-port>-->
                            <el-input type="text" v-model="condition['search_LIKE_containerNo']" @input="changeUp"
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="箱型">
                            <autoSearchEntrust v-model="condition['search_LIKE_containerType']"></autoSearchEntrust>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="尺寸">
                            <autoSearchSize v-model="condition['search_EQ_containerSize']"></autoSearchSize>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="空重">
                            <el-select v-model="condition['search_EQ_ifHeavy']" placeholder="请选择" clearable>
                                <el-option v-for="[key, val] in _dictIfHeavyType" :key="key" :label="val"
                                           :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="货名">
                            <el-input v-model="condition['search_LIKE_cargoName']"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="箱主">
                            <autoSearchCustom v-model="condition['search_EQ_ownerId']"
                                              :isOwner="true"></autoSearchCustom>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="进出口">
                            <el-select v-model="condition['search_EQ_importAndExport']" placeholder="请选择" clearable>
                                <el-option v-for="[key, val] in _dictImportAndExportType" :key="key" :label="val"
                                           :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否在港">
                            <el-select v-model="condition['search_EQ_ifPort']" placeholder="请选择" clearable>
                                <el-option v-for="[key, val] in _dictTrueOrFalse" :key="key" :label="val"
                                           :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否在场">
                            <el-select v-model="condition['search_EQ_ifSpot']" placeholder="请选择" clearable>
                                <el-option v-for="[key, val] in _dictTrueOrFalse" :key="key" :label="val"
                                           :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="进港时间">
                            <!-- <date-slot :startDate.sync="condition.search_GTE_inPortTime"
                                    :endDate.sync="condition.search_LTE_inPortTime"></date-slot> -->
                            <el-date-picker v-model="dateSelect"
                                            @change="handleTimeChange"
                                            type="datetimerange"
                                            style="width:350px"
                                            :picker-options="pickerOptions"
                                            range-separator="至" start-placeholder="开始时间"
                                            end-placeholder="结束时间" align="right"
                                            value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-button v-if="power('WCARGO_CONTAINERMGR_INPORT:QUERY')" type="primary" icon="el-icon-search" @click="loadData" class="ml-100">查 询</el-button>
                <el-button v-if="power('WCARGO_CONTAINERMGR_INPORT:IMPORT')" type="primary" @click="handleImport">导入在港箱</el-button>
                <el-button v-if="power('WCARGO_CONTAINERMGR_INPORT:IMPORTFIELD')" type="primary" @click="handleImportCW">导入在港箱场位</el-button>
                <el-button v-if="power('WCARGO_CONTAINERMGR_INPORT:BACTHUPD')" @click="handleEdit(true)">批量修改</el-button>
                <el-button v-if="power('WCARGO_CONTAINERMGR_INPORT:QUERY')" @click="handleExport">明细导出</el-button>
            </el-form>
            <el-table slot="list" :data="container" border stripe max-height="500"
                      @selection-change="handleSelectionChange">
                <el-table-column type="selection" fixed="left" prop="id" width="55"></el-table-column>
                <el-table-column type="index" fixed="left" label="序号" width="55"></el-table-column>
                <el-table-column fixed="left" label="箱号" prop="containerNo"  min-width="140"></el-table-column>
                <el-table-column label="箱型" prop="containerType"  min-width="75"></el-table-column>
                <el-table-column label="尺寸" prop="containerSize"  min-width="75"></el-table-column>
                <el-table-column label="空重" prop="ifHeavy"  min-width="75">
                    <template slot-scope="scope">
                        {{scope.row.ifHeavy|_filterIfHeavyType}}
                    </template>
                </el-table-column>
                <el-table-column label="内外贸" prop="tradeType"  min-width="90">
                    <template slot-scope="scope">
                        {{scope.row.tradeType|_filterTradeType}}
                    </template>
                </el-table-column>
                <el-table-column label="货名" prop="cargoName"  min-width="90"></el-table-column>
                <el-table-column label="货重" prop="cargoWeight"  min-width="75"></el-table-column>
                <el-table-column label="箱主" prop="ownerName"  min-width="160"></el-table-column>
                <el-table-column label="位置" prop="positionDesc"  min-width="100"></el-table-column>
                <el-table-column label="运输方式" prop="inTransportMode"  min-width="120">
                    <template slot-scope="scope">
                        {{ scope.row.inTransportMode | _filterTransportModeType }}
                    </template>
                </el-table-column>
                <el-table-column label="车号" prop="inCarNo"  min-width="120"></el-table-column>
                <el-table-column label="进出口" prop="importAndExport"  min-width="100">
                    <template slot-scope="scope">
                        {{ scope.row.importAndExport | _filterImportAndExportType }}
                    </template>
                </el-table-column>
                <el-table-column label="收货人" prop="receiver"  min-width="100"></el-table-column>
                <el-table-column label="收货人电话" prop="receiverPhone"  min-width="120"></el-table-column>
                <el-table-column label="是否在场" prop="ifSpot"  min-width="120">
                    <template slot-scope="scope">
                        {{ scope.row.ifSpot | _filterTrueOrFalse }}
                    </template>
                </el-table-column>
                <el-table-column label="是否在港" prop="ifPort"  min-width="120">
                    <template slot-scope="scope">
                        {{ scope.row.ifPort | _filterTrueOrFalse }}
                    </template>
                </el-table-column>
                <el-table-column label="提单号" prop="billNumber"  min-width="100"></el-table-column>
                <el-table-column label="进港时间" prop="inPortTime"  min-width="160"></el-table-column>
                <el-table-column prop="options" fixed="right" align="center" label="操作"  width="80">
                    <template slot-scope="scope">
                        <el-button v-if="power('WCARGO_CONTAINERMGR_INPORT:UPD')" type="text" size="small" @click="handleEdit(false,scope.row)">编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </base-list>
        <el-dialog title="EXCEL导入在港箱" :visible.sync="dialogForm" width="1100px" :before-close="handleDialogClose">
            <excel-import code="ZGXDR" @getUploadData="handleImportExcel"></excel-import>
            <el-table :data="containerImport" border stripe max-height="600" style="margin-top:10px">
                <el-table-column type="index" fixed="left" label="序号" width="55"></el-table-column>
                <el-table-column fixed="left" label="箱号" prop="containerNo"  min-width="140"></el-table-column>
                <el-table-column label="箱型" prop="containerType"  min-width="75"></el-table-column>
                <el-table-column label="尺寸" prop="containerSize"  min-width="75"></el-table-column>
                <el-table-column label="空重" prop="ifHeavy"  min-width="75">
                    <template slot-scope="scope">
                        {{scope.row.ifHeavy|_filterIfHeavyType}}
                    </template>
                </el-table-column>
                <el-table-column label="内外贸" prop="tradeType"  min-width="90">
                    <template slot-scope="scope">
                        {{scope.row.tradeType|_filterTradeType}}
                    </template>
                </el-table-column>
                <el-table-column label="箱主" prop="ownerName"  min-width="160"></el-table-column>
                <el-table-column label="货名" prop="cargoName"  min-width="100"></el-table-column>
                <el-table-column label="货重" prop="cargoWeight"  min-width="75"></el-table-column>
                <el-table-column label="货主名称" prop="cargoOwnerName"  min-width="100"></el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleDialogClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit" :loading="$store.getters.loadingBtn">确认并导入</el-button>
            </div>
        </el-dialog>
        <el-dialog title="导入在港箱场位" :visible.sync="dialogPosition" width="1100px" :before-close="handleDialogCloseCW">
            <excel-import code="ZGCW" @getUploadData="handleImportExcelCW"></excel-import>
            <el-table :data="containerImportCW" border stripe max-height="600" style="margin-top:10px">
                <el-table-column type="index" fixed="left" label="序号" width="55"></el-table-column>
                <el-table-column fixed="left" label="箱号" prop="containerNo"  min-width="140"></el-table-column>
                <el-table-column label="场区" prop="yardAreaNo"  min-width="105"></el-table-column>
                <el-table-column label="贝位" prop="bayNo"  min-width="105"></el-table-column>
                <el-table-column label="排位" prop="rowNo"  min-width="105"></el-table-column>
                <el-table-column label="层高" prop="tierNo"  min-width="105"></el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleDialogCloseCW">取 消</el-button>
                <el-button type="primary" @click="handleSubmitCW" :loading="$store.getters.loadingBtn">确认并导入</el-button>
            </div>
        </el-dialog>
        <edit-form v-if="dialogFormEdit" ref="editForm" @load="loadData"></edit-form>
    </div>
</template>

<script>
    import {
        getContainerPort,
        importContainerOnPort,
        importContainerOnPortCW
    } from "@/api/containerType/containerType";
    import searchContainerOnPort from "@/components/autocomplete/autoSearchContainerOnPort";
    import { newExportExcel } from "@/utils/newExport";
    import { ifHeavyType, tradeType, transportModeType } from "@/assets/dict";
    import dateSlot from "@/components/date/dateSlot";
    import ExcelImport from "@/components/excel/import";
    import autoSearchEntrust from "@/components/autocomplete/autoSearchEntrust";
    import autoSearchSize from "@/components/autocomplete/autoSearchSize";
    import autoSearchCustom from "@/components/autocomplete/autoSearchCustom";
    import editForm from './editForm'

    export default {
        name: "在港箱查询",
        components: {
            searchContainerOnPort,
            dateSlot,
            ExcelImport,
            autoSearchEntrust,
            autoSearchSize,
            autoSearchCustom,
            editForm
        },
        data() {
            return {
                condition: {
                    search_GTE_inPortTime: '',
                    search_LTE_inPortTime: '',
                    search_EQ_ifPort: true,
                },
                dateSelect: '',
                container: [], // 数据源
                pageSearch: getContainerPort,
                dialogForm: false,
                dialogPosition: false,
                containerImport: [],
                containerImportCW: [],
                pickerOptions: {
                    shortcuts: [
                        {
                            text: "最近一周",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 7
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近一个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 30
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近三个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 90
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        }
                    ]
                },
                select: [],
                dialogFormEdit: false
            };
        },
        mounted() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.$refs.containerOnPort.loadData();
            },
            changeUp(v) {
                let a = v.toUpperCase();
                this.$nextTick(() => {
                    this.condition["search_LIKE_containerNo"] = a;
                });
            },
            handleExport() {
                let map = new Map();
                map.set("containerNo", "箱号");
                map.set("containerType", "箱型");
                map.set("containerSize", "尺寸");
                map.set("ifHeavy", "空重");
                map.set("tradeType", "内外贸");
                map.set("cargoName", "货名");
                map.set("cargoWeight", "货重");
                map.set("ownerName", "箱主");
                map.set("billNumber", "提单号");
                map.set("positionDesc", "位置");
                map.set("inTransportMode", "运输方式");
                map.set("inCarNo", "车号");
                map.set("inShipName", "船名");
                map.set("inVoyageNo", "航次");
                map.set("inPortTime", "进港时间");
                let exportRecords = [];
                let exportArr = JSON.parse(JSON.stringify(this.container));
                exportArr.forEach(record => {
                    let exportRecord = {};
                    for (let [key, value] of map.entries()) {
                        if (key === "ifHeavy") {
                            record[key] = ifHeavyType.get(record[key]);
                        }
                        if (key === "tradeType") {
                            record[key] = tradeType.get(record[key]);
                        }
                        if (key === "inTransportMode") {
                            record[key] = transportModeType.get(record[key]);
                        }
                        exportRecord[value] = record[key];
                    }
                    exportRecords.push(exportRecord);
                });
                newExportExcel("在港箱查询", exportRecords);
            },
            handleImport() {
                this.dialogForm = true;
            },
            handleImportCW() {
                this.dialogPosition = true
            },
            handleImportExcel(data) {
                data.map(m => {
                    if (m.tradeType.indexOf("内") !== -1) {
                        m.tradeType = "I";
                    }
                    if (m.tradeType.indexOf("外") !== -1) {
                        m.tradeType = "O";
                    }
                    if (m.tradeType !== "I" && m.tradeType !== "O") {
                        m.tradeType = null;
                    }
                    if (m.ifHeavy.indexOf("空") !== -1) {
                        m.ifHeavy = "E";
                    }
                    if (m.ifHeavy.indexOf("重") !== -1) {
                        m.ifHeavy = "F";
                    }
                    if (m.ifHeavy !== "E" && m.ifHeavy !== "F") {
                        m.ifHeavy = null;
                    }
                    m.cargoWeight = Number(m.cargoWeight);
                });
                this.containerImport = JSON.parse(JSON.stringify(data));
            },
            handleImportExcelCW(data) {
                this.containerImportCW = JSON.parse(JSON.stringify(data))
            },
            handleSubmit() {
                importContainerOnPort(this.containerImport).then(res => {
                    this.$message({ message: "导入成功!", type: "success" });
                    this.handleDialogClose();
                });
            },
            handleSubmitCW() {
                importContainerOnPortCW(this.containerImportCW).then(res => {
                    this.$message({ message: "导入成功!", type: "success" });
                    this.handleDialogClose();
                });
            },
            handleDialogClose() {
                this.containerImport = [];
                this.dialogForm = false;
                this.loadData();
            },
            handleDialogCloseCW() {
                this.containerImportCW = [];
                this.dialogPosition = false;
                this.loadData();
            },
            handleTimeChange(val) {
                if (val) {
                    this.condition["search_GTE_inPortTime"] = val[0]
                    this.condition["search_LTE_inPortTime"] = val[1]
                } else {
                    this.condition["search_GTE_inPortTime"] = ''
                    this.condition["search_LTE_inPortTime"] = ''
                }
            },
            handleEdit(bool, item) {
                this.dialogFormEdit = true
                this.$nextTick(() => {
                    if (bool) {
                        if (this.select.length === 0) {
                            this.$message({ message: '请先选择数据', type: 'error' })
                            return
                        }
                        this.$refs.editForm.dialogForm = true
                        this.$refs.editForm.isBatch = true
                        this.$refs.editForm.list = JSON.parse(JSON.stringify(this.select))
                    } else {
                        this.$refs.editForm.dialogForm = true
                        this.$refs.editForm.isBatch = false
                        this.$refs.editForm.form = JSON.parse(JSON.stringify(item))
                    }
                })
            },
            handleSelectionChange(val) {
                this.select = val
            }
        },
        // computed: {
        //     // 设置有效起始日期
        //     startPickerOptions() {
        //         let endDate = this.condition["search_LTE_inPortTime"];
        //         return {
        //             disabledDate(time) {
        //                 // if (time.getTime() < (+new Date()) - 60 * 60 * 24 * 1000) {
        //                 //     return true
        //                 // }
        //                 if (endDate) {
        //                     return time.getTime() > new Date(endDate).getTime();
        //                 } else {
        //                     return false;
        //                 }
        //             }
        //         };
        //     },
        //     // 设置有效截止日期
        //     endPickerOptions() {
        //         let startDate = this.condition["search_GTE_inPortTime"];
        //         return {
        //             disabledDate(time) {
        //                 if (startDate) {
        //                     // return time.getTime() < new Date(startDate).getTime() - 60 * 60 * 24 * 1000
        //                     return time.getTime() < new Date(startDate).getTime();
        //                 } else {
        //                     return false;
        //                 }
        //             }
        //         };
        //     }
        // }
    };
</script>

<style scoped>
</style>
